<template>
  <div>
    <ElDivider>表格字段</ElDivider>
    <ElTable :data="tableColumn" :show-header="false">
      <ElTableColumn prop="label" label="标签">
        <template #default="scope">
          <ElLink @click="handleEditItem(scope.row)">{{ scope.row.label }}</ElLink>
        </template>
      </ElTableColumn>
      <ElTableColumn prop="action" label="操作" width="70px">
        <template #default="scope">
          <ElButton text type="danger" @click="handleDelete(scope.row)">
            <Icon icon="delete"></Icon>
          </ElButton>
        </template>
      </ElTableColumn>
    </ElTable>
    <div style="margin: 10px">
      <ElButton link type="primary" @click="handleAddItem">
        <Icon icon="plus"></Icon>
        <span>添加一项</span>
      </ElButton>
    </div>
    <Dialog ref="dialogRef" :title="title" @submit="handleSubmit" @open="handleOpen">
      <Form ref="formRef" :schemas="schemas" label-width="80px">
        <template #entityId="{ formModel, schema }">
          <Select
            v-model="formModel[schema.field]"
            :options="entityList"
            label-name="entityName"
            value-name="id"
            :clearable="false"
          ></Select>
        </template>
        <template #column="{ formModel, schema }">
          <Select
            v-model="formModel[schema.field]"
            :options="fieldList"
            label-name="fieldName"
            value-name="fieldCode"
            @change="value => handleChange(value, formModel)"
          ></Select>
        </template>
        <template #dictType="{ formModel, schema }">
          <ApiSelect
            v-model="formModel[schema.field]"
            :request-api="dictTypeApi.listAll"
            label-name="dictName"
            value-name="dictType"
          ></ApiSelect>
        </template>
      </Form>
    </Dialog>
  </div>
</template>

<script setup lang="tsx" name="TableColumnPanel">
import { computed, ref, watch } from "vue";
import { ElDivider, ElTable, ElTableColumn, ElButton, ElLink } from "element-plus";
import { Icon } from "@/components/Icon";
import { Dialog, useDialog } from "@/components/Dialog";
import { Form, useForm, Select, ApiSelect } from "@/components/Form";
import dictTypeApi from "@/views/system/dict-type/api";
import appApi from "@/views/micro/app/api";
import entityApi from "@/views/micro/entity/api";
import { generateId, deepClone } from "../../../util/common";
import { SchemaProps } from "@/components/Form/type";
const props = defineProps({
  designer: {
    type: Object
  }
});
const title = ref();
const dialogRef = ref();
const dialog = useDialog(dialogRef);
const formRef = ref();
const form = useForm(formRef);
const entityList = ref([]);
const fieldList = ref([]);
const tableColumn = computed(() => props.designer!.widget!.tableColumn);
const handleChange = (value, formModel) => {
  for (const field of fieldList.value) {
    if (field.fieldCode === value) {
      formModel.label = field.fieldName;
      formModel.dictType = field.dictType;
      break;
    }
  }
};
const handleAddItem = async () => {
  title.value = "新增表格字段";
  await dialog.open(0);
  await form.updateFields({ entityId: props.designer!.global.entityId });
};
const handleEditItem = async row => {
  title.value = "编辑表格字段";
  await dialog.open(1);
  await form.updateFields(row);
};
const handleDelete = row => {
  for (let index = 0; index < tableColumn.value.length; index++) {
    if (tableColumn.value[index].id === row.id) {
      tableColumn.value.splice(index, 1);
      break;
    }
  }
};
const handleSubmit = async flag => {
  const fields = await form.validateFields();
  if (flag) {
    const cols = tableColumn.value;
    for (let index = 0; index < cols.length; index++) {
      if (cols[index].id === fields.id) {
        cols[index] = deepClone(fields);
        break;
      }
    }
  } else {
    fields.id = "column" + generateId();
    tableColumn.value.push(deepClone(fields));
  }
  dialog.close();
};
const handleOpen = async () => {
  const formModel = await form.getFields();
  watch(
    () => props.designer!.global.appId,
    async id => {
      if (id) {
        entityList.value = await appApi.getEntityVoList({ id });
      } else {
        entityList.value = [];
      }
    },
    {
      immediate: true
    }
  );
  watch(
    () => formModel.entityId,
    async id => {
      if (id) {
        fieldList.value = await entityApi.listField({ id });
      } else {
        fieldList.value = [];
      }
    },
    {
      immediate: true
    }
  );
};
const schemas: SchemaProps[] = [
  {
    field: "entityId",
    label: "业务实体",
    required: true
  },
  {
    field: "column",
    label: "实体字段",
    required: true
  },
  {
    field: "label",
    label: "列名",
    required: true
  },
  {
    field: "dictType",
    label: "字典"
  },
  {
    field: "width",
    label: "宽度",
    el: "number",
    elProps: {
      controlsPosition: "right",
      precision: 0,
      style: {
        width: "100%"
      }
    }
  }
];
</script>

<style scoped></style>
